<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name}</title>
    <link href="/static/css/framework-font.css" rel="stylesheet"/>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="/static/js/plupload.full.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="/static/js/jquery.cookie.js"></script>
    <link href="/static/css/framework-theme.css" rel="stylesheet"/>
    <!--弹框js-->
    <script src="/static/js/yii.js"></script>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>
        {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
    <link href="/static/css/default/public.css" rel="stylesheet"/>
    {/if}
    <script src="/static/js/jquery-2.1.1.js"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
    <script type="text/javascript"
            src='//webapi.amap.com/maps?v=2.0&key=1b5095aca8acff10518bf883f334b2ad&plugin=AMap.ToolBar'></script>
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

</head>
<body>
<style>
    html, body {
        background-color: #FFF !important;
    }

    .modal-body {
        background-color: #fff;
        padding: 15px
    }

    .page-header {
        margin-top: 15px !important;
    }

    .geographic input {
        width: 100px !important;
        float: left;
        margin-right: 15px;
    }
    #ul_pics li{display: inline-block;float: left;margin-right:15px;margin-top:15px;}
    #ul_pics li .img{width:70px;text-align: center}
    #ul_pics li .img img{width:70px;height:70px;}
    .images_del{width:105px;text-align: center}
    .config_img{height:75px;margin-top:5px;}
</style>

<div class="modal-body">


    <div class="page-header">
        <h3>添加景区</h3>
    </div>

    <form class="form-horizontal layui-form">

        <div class="form-group">
            <label class="col-sm-1 control-label">*所属区域:</label>
            <div class="col-sm-2">
                <select name="provinceId" lay-verify="provinceId" lay-filter="provinceId" class="select">
                    <option value="">请选择</option>
                    {volist name="region" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>

            <div class="col-sm-2">
                <select name="fcityId" lay-verify="fcityId" lay-filter="fcityId" class="select">
                    <option>请选择</option>
                </select>
            </div>

            <div class="col-sm-2">
                <select name="cityRegionId" lay-verify="cityRegionId" lay-filter="cityRegionId" class="select">
                    <option>请选择</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">*乡/镇/街道:</label>
            <div class="col-sm-2">
                <select name="streetCode" lay-verify="streetCode" lay-filter="streetCode" class="select">
                    <option>请选择街道</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">*详细地址:</label>
            <div class="col-sm-6">
                <input type="text" name="address" placeholder="详细地址" class="form-control">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">*地图标识:</label>
            <div class="col-sm-8 geographic">
                <input type="text" class="form-control" name="lng">
                <input type="text" class="form-control" name="lat">
                <a class="btn btn-default js_coordinate">选择坐标</a>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-1 control-label">*景区名称:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="name" placeholder="景区名称">
            </div>

            <label class="col-sm-1 control-label">营业时间:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="businessHours" placeholder="营业时间">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-1">LOGO:</label>
            <div class="col-sm-6">
                <div class="input-group ">
                    <input type="text" id="thumb" name="thumb" value="" class="form-control" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="upload" type="button" data-original-title="" title="">选择图片</button>
                    </span>
                </div>
                <img class="config_img thumb" src="/static/images/nopic-107.png" >
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-1 control-label">*负责人:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="principal" placeholder="负责人">
            </div>

            <label class="col-sm-1 control-label">*负责人电话:</label>
            <div class="col-sm-2">
                <input type="number" class="form-control" name="phone" placeholder="负责人电话">
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-1 control-label">*简介:</label>
            <div class="col-sm-6">
                <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-1 control-label">详细介绍:</label>
            <div class="col-sm-8">
                <textarea id="content" ></textarea>
            </div>
        </div>

        <div class="form-group group_photo">
            <label class="col-sm-1 control-label">景区图片:</label>
            <!--存储上传的图片信息-->
            <div class="col-sm-4">
                <div class="input-group ">
                    <input type="text" id="images" disabled name="images" value="" class="form-control" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="images_upload" type="button" data-original-title="" title="">选择图片</button>
                    </span>
                </div>
            </div>
        </div>

        <div class="form-group group_photo">
            <label class="col-sm-1 control-label"></label>
            <!--存储上传的图片信息-->
            <div class="col-sm-8">
                <div class="input-group show_multiple row">

                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">排序:</label>
            <div class="col-sm-2">
                <input type="number" class="form-control" name="sort" placeholder="排序">
            </div>

            <label class="col-sm-1 control-label">*状态:</label>
            <div class="col-sm-2">
                <select name="status">
                    <option value="1">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
    </form>
</div>
<div class="add_button">

    <div class="form-group">
        <label class="col-sm-1 control-label"></label>
        <div class="col-sm-8">
            <a type="button" class="layui-btn layui-btn-primary" href="{:URL('community/colony/index')}">取消</a>
            <button type="button" class="layui-btn" id="newsave">保存</button>
        </div>
    </div>
</div>


<script>

    $(".show_multiple").on("click",".images_del",function () {
        $(this).parent().remove();
    })

    var newModal = new yii.modal();

    //文件页面
    $("#upload").click(function () {
        $(newModal.getid()).show();
        newModal.initialization({
            url: "{:URL('common/upload/index')}",
            type: "post",
            data:{
                type:'detail'
            }
        });
    });
    newModal.on("upload",function(data){
        var images = '';
        $(newModal.getid()).find("#data-area .newimages .active img").each(function () {
            images = $(this).attr('src');
            return false
        })
        $(newModal.getid()).hide();
        //$(".modal-backdrop").remove();
        //$('#nowMainProjectDataForm').modal('hide');
        $(newModal.getid()).find(".modal").hide();
        $("#thumb").val(images);
        $(".config_img").attr("src",images)
    });

    //多图片上传
    $("#images_upload").click(function () {
        $(newModal.getid()).show();
        newModal.initialization({
            url: "{:URL('common/upload/index')}",
            type: "post",
            data:{
                type:'detail',
                multiple:'multiple'
            }
        });
    });

    newModal.on("multiple",function(data){
        var images = '';
        $(newModal.getid()).find("#data-area .newimages .active img").each(function () {
            images += '<div class="newimg"><img src="'+$(this).attr('src')+'" ><input type="hidden" name="images[]" value="'+$(this).attr('src')+'"><div class="images_del" >删除</div></div>';
        })
        $(newModal.getid()).hide();
        //遮罩层隐藏
        //$('#nowMainProjectDataForm').modal('hide');
        $(".modal-backdrop").remove();
        $(newModal.getid()).find(".modal").hide();
        $(".show_multiple").append(images);
    });


    //选择坐标界面
    $(".js_coordinate").click(function () {
        var lng = $('input[name="lng"]').val();
        var lat = $('input[name="lat"]').val();
        $(newModal.getid()).show();
        newModal.initialization({
            url: "{:URL('common/Common/map')}",
            type: "post",
            data: {
                type: 'detail',
                lng: lng, lat: lat
            }
        });
    });

    //赋值信息
    newModal.on("newmap", function (data) {
        var lng = $(newModal.getid()).find("#lng").val();
        var lat = $(newModal.getid()).find("#lat").val();
        $('input[name="lng"]').val(lng);
        $('input[name="lat"]').val(lat);
    });

    layui.extend({
        tinymce: '/static/tinymce/tinymce'
    });
    layui.use(['form', 'layedit', 'tree', 'util','tinymce'], function () {
        var form = layui.form
            , layer = layui.layer;
        var tinymce = layui.tinymce;


        tinymce.render({
            elem:'#content',
            height: 600,
            images_upload_handler: function (blobInfo, succFun, failFun) {
                var xhr, formData;
                var file = blobInfo.blob();//转化为易于理解的file对象
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', "{:URL('/common/upload/textUpload')}");
                xhr.onload = function() {
                    var json;
                    json = JSON.parse(xhr.responseText);
                    succFun(json.path);
                };
                formData = new FormData();
                formData.append('file', file, file.name );//此处与源文档不一样
                xhr.send(formData);
            }
        },(opt, edit) => {

        });



        //触发二级联动
        form.on('select(provinceId)', function (data) {
            //触发联动
            var level = 2;
            var id = data.value;
            $.ajax({
                type: 'post',
                url: "{:URL('common/Common/cityApi')}",
                data: {level: level, id: id},
                dataType: 'JSON',
                success: function (res) {
                    var arr = res.data;
                    var html = '<option value="">请选择</option>';
                    $.each(arr, function (e, v) {
                        html += '<option value="' + v.id + '">' + v.name + '</option>';
                    });
                    $('select[name="fcityId"]').html(html);
                    $('select[name="cityRegionId"]').html('<option value="">请选择</option>');
                    $('select[name="streetCode"]').html('<option value="">请选择</option>');
                    form.render('select');
                },
                error: function (res) {
                }
            });
        });


        //触发三级联动
        form.on('select(fcityId)', function (data) {
            //触发联动
            var level = 3;
            var id = data.value;
            $.ajax({
                type: 'post',
                url: "{:URL('common/Common/cityApi')}",
                data: {level: level, id: id},
                dataType: 'JSON',
                success: function (res) {
                    var arr = res.data;
                    var html = '<option value="">请选择</option>';
                    $.each(arr, function (e, v) {
                        html += '<option value="' + v.id + '">' + v.name + '</option>';
                    });
                    $('select[name="cityRegionId"]').html(html);
                    $('select[name="streetCode"]').html('<option value="">请选择</option>');
                    form.render('select');
                },
                error: function (res) {
                }
            });
        });

        //触发四级联动
        form.on('select(cityRegionId)', function (data) {
            //触发联动
            var level = 4;
            var id = data.value;
            $.ajax({
                type: 'post',
                url: "{:URL('common/Common/cityApi')}",
                data: {level: level, id: id,type:"colony"},
                dataType: 'JSON',
                success: function (res) {
                    var arr = res.data;
                    var html = '<option value="">请选择</option>';
                    $.each(arr, function (e, v) {
                        html += '<option value="' + v.id + '">' + v.name + '</option>';
                    });
                    $('select[name="streetCode"]').html(html);
                    form.render();
                    //form.render('select');
                },
                error: function (res) {
                }
            });
        });

        $("#newsave").click(function () {
            var content = tinymce.get('#content').getContent();
            var data = $("form").serializeArray();
            data.push({name: "content", value: content});
            $.ajax({
                type: 'post',
                url: "{:URL('community/colony/saveColony')}",
                data: data,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code != 0) {
                        layer.alert(res.msg);
                    } else {
                        window.location.href = "{:URL('community/colony/index')}";
                    }
                },
                error: function (res) {

                }
            });

        })


        layui.form.render('select');
        form.render();


    });
</script>

</body>
</html>